<style>
    .rich-table-cell{
        font-size:15px;
    }
</style>
<f:view>
    <a4j:region>
    <h:form>
        <h:panelGrid columns="3" >
            <h:outputText value="Sale Postings of #{sessionBean.ejbSession.currentSite.site}" style="font-size: 20px; font-weight: bold;"/>
            <c:if test="${!empty sessionBean.areasCurrentSite}" >
            <h:outputText value=", " style="font-size: 20px; font-weight: bold;"/>
            <h:selectOneMenu id="area" value="#{adminBean.areaId}" >
                    <f:selectItem
                        itemValue="0"
                        itemLabel="All Areas"/>
                <c:forEach var="area" items="#{sessionBean.areasCurrentSite}" >
                    <f:selectItem
                        itemValue="#{area.id}"
                        itemLabel="#{area.area}"/>
                </c:forEach>
                <a4j:support event="onchange" action="#{adminBean.changeCurrentArea}" reRender="salePostingsForm"/>
            </h:selectOneMenu>
            </c:if>
        </h:panelGrid>
    </h:form>
    <div align="center">
    <h:form>
        <h:panelGroup id="searchMessages" ><h:messages style="color: red" styleClass="errorMessage" /></h:panelGroup>
        <h:panelGrid columns="3" >
            <h:panelGrid columns="6" >
                <h:outputText value="Search for:"/>
                <h:inputText id="searchValue" maxlength="50" value="#{saleBean.searchValue}" />
                <h:outputText value="in:"/>
                <h:selectOneMenu id="saleCategorie" value="#{saleBean.saleCategorieId}" >
                        <f:selectItem
                            itemValue="0"
                            itemLabel="All For Sale / Wanted"/>
                    <c:forEach var="categorie" items="#{adminBean.saleCategories}" >
                        <f:selectItem
                            itemValue="#{categorie.id}"
                            itemLabel="#{categorie.categorie}"/>
                    </c:forEach>
                </h:selectOneMenu>
                <h:outputText value=", "/>
                <h:selectOneMenu id="saleType" value="#{saleBean.searchType}" >
                    <f:selectItem
                        itemValue="both"
                        itemLabel="both types"/>
                    <f:selectItem
                        itemValue="offered"
                        itemLabel="offered"/>
                    <f:selectItem
                        itemValue="wanted"
                        itemLabel="wanted"/>
                </h:selectOneMenu>
            </h:panelGrid>
            <a4j:commandButton id="submit" type="submit" value="Search" reRender="searchMessages,salePostingsForm" />
            <h:panelGroup>
                <h:selectBooleanCheckbox value="#{saleBean.onlySearchTitles}" /><h:outputText value="only search titles"/>
                <h:selectBooleanCheckbox value="#{saleBean.hasImage}" /><h:outputText value="has image"/>
            </h:panelGroup>
            <h:panelGrid columns="2" >
                <h:outputText value="Price:"/>
                <h:panelGrid columns="4">
                    <rich:inplaceInput id="minPrice" defaultLabel="min price" value="#{saleBean.searchMinPrice}" inputWidth="50px" converter="doubleConverter" converterMessage="the min price is not valid"/>
                    <h:outputText value="$, "/>
                    <rich:inplaceInput id="maxPrice" defaultLabel="max price" value="#{saleBean.searchMaxPrice}" inputWidth="50px" converter="doubleConverter" converterMessage="the max price is not valid"/>
                    <h:outputText value="$."/>
                </h:panelGrid>
            </h:panelGrid>
        </h:panelGrid>
    </h:form>
    <a4j:status startText="Searching..." stopText="Complete" />
    </a4j:region>
    <h:form id="salePostingsForm">
        <rich:dataTable id="salePostingsTable" rows="5" value="#{saleBean.listSales}" var="sale" border="1" >
            
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="Publish Date" />
                </f:facet>
                <h:outputText value="#{sale.publishDate}" >
                    <f:convertDateTime type="date" dateStyle="medium"/>
                </h:outputText>
            </rich:column>
            
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="Title" />
                </f:facet>
                <h:outputLink value="/site/faces/posting.html?site=#{sessionBean.ejbSession.currentSite.id}&type=sale&id=#{sale.id}" >
                    <h:outputText value="#{sale.title}"/>
                </h:outputLink>
                <h:outputText value=", #{sale.price}$" rendered="#{sale.price>0}" />
                <h:outputText value=" - (#{sale.location})" rendered="#{sale.location!=null && sale.location!=''}"/>
            </rich:column>
            
            <rich:column rendered="#{saleBean.saleCategorieId==0}">
                <f:facet name="header">
                    <h:outputText value="Categorie" />
                </f:facet>
                <h:outputText value="#{sale.categorie}" />
            </rich:column>
            
        </rich:dataTable>
        <rich:spacer height="10" />
        <rich:datascroller for="salePostingsTable" page="#{saleBean.page}" maxPages="5" />
    </h:form>
    </div>
    <h:form>
        <h:commandLink value="Back to Welcome Page" action="#{saleBean.backEdit}" />
    </h:form>
    <rich:separator height="1" />
</f:view>